Day2 金魚 相對絕對定位

簡單小語

定位的重要性不可言喻，一招可以有各種變化，釐清relative，absolute，fixed之間的差異及使用時機，套句Amos老師警言"不是absolute就一定要用relative"，清楚知道各種定位所參照的對象，即便再次刻意練習還是會有出錯，比如一開始將ad寫成position: absolute發現居然沒有置中(不會跟著滑鼠移動)，才發現應該使用position: fixed才會一直在畫面中間，刻意練習算是又複習到蓋版廣告的應用了。
老師說：fixed 是對視窗，不是對 body。

筆記分享

1. 使用 wrap+ margin: 0 auto可以讓內容水平置中。
2. 共同的 CSS可以一同設定避免過長 ex.content。
3. 重複性的物件建議使用ul/li結構。
4. justify-content:space-between左右對齊邊框分配其餘空間於物件中。
5. ad需要蓋版廣告，因此要使用position: fixed讓他浮起來(預設會去定位body)，使用top, bottom,right, left = 0 及 margin: auto後，即可定位於畫面中央。
6. btn使用position: absolute讓他定位在ad上並移動位置放置右上角。
7. btn設定整體外觀，使用line-height = height對單行的物件垂直置中。
8. a設定文字外觀，text-decoration: none，幾乎都會設定在a上。
9. a:hover設定滑鼠觸摸的效果，可以增加使用者體驗。
10. img使用vertical-align: middle可以消除圖片對齊的空隙。

刻意練習

Practice(200713 Day 2)

首次練習

Practice(200513_相對絕對定位)

2020 iT邦幫忙鐵人賽 Day2 網頁前端-刻意練習(相對絕對定位)